<ng-template #itemsTpl>
  <div class="ant-list-items" *ngIf="nzDataSource.length > 0">
    <ng-container *ngFor="let item of nzDataSource; let index = index">
      <ng-template
        [ngTemplateOutlet]="nzRenderItem"
        [ngTemplateOutletContext]="{ $implicit: item, index: index }"
      ></ng-template>
    </ng-container>
  </div>
</ng-template>
<div *ngIf="nzHeader" class="ant-list-header">
  <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
</div>
<nz-spin [nzSpinning]="nzLoading">
  <ng-container *ngIf="nzDataSource">
    <div *ngIf="nzLoading && nzDataSource.length === 0" [style.min-height.px]="53"></div>
    <div *ngIf="nzGrid; else itemsTpl" nz-row [nzGutter]="nzGrid.gutter">
      <div
        nz-col
        [nzSpan]="nzGrid.span"
        [nzXs]="nzGrid.xs"
        [nzSm]="nzGrid.sm"
        [nzMd]="nzGrid.md"
        [nzLg]="nzGrid.lg"
        [nzXl]="nzGrid.xl"
        [nzXXl]="nzGrid.xxl"
        *ngFor="let item of nzDataSource; let index = index"
      >
        <ng-template
          [ngTemplateOutlet]="nzRenderItem"
          [ngTemplateOutletContext]="{ $implicit: item, index: index }"
        ></ng-template>
      </div>
    </div>
    <div *ngIf="!nzLoading && nzDataSource.length === 0" class="ant-list-empty-text">
      <nz-embed-empty [nzComponentName]="'list'" [specificContent]="nzNoResult"></nz-embed-empty>
    </div>
  </ng-container>
  <ng-content></ng-content>
</nz-spin>
<div *ngIf="nzFooter" class="ant-list-footer">
  <ng-container *nzStringTemplateOutlet="nzFooter">{{ nzFooter }}</ng-container>
</div>
<ng-template [ngTemplateOutlet]="nzLoadMore"></ng-template>
<div *ngIf="nzPagination" class="ant-list-pagination">
  <ng-template [ngTemplateOutlet]="nzPagination"></ng-template>
</div>
